<template>
  <el-dialog :visible.sync="dialogFormVisible" class="editDialog" append-to-body>
    <el-row>
      <el-col class="overview-map-container">
        <a-map-container
          ref="map"
          :center="center"
          :zoom="zoom"
          :base-layer="baseLayer"
          :style="{height:(bodyHeight-200)+'px'}"
          vid="overview"
          class="map-demo"
          @ready="mapReady"
        />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import AMapContainer from '@/components/Amap/AMapContainer'
export default {
  components: { AMapContainer },
  data() {
    return {
      dialogFormVisible: false,
      map: null, // 地图对象
      baseLayer: 'gaode_vec', // 底图图层
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      zoom: 12
    }
  },
  computed: {
    ...mapGetters([
      'bodyHeight'
    ])
  },
  methods: {
    // 初始化放这里
    mapReady(map) {
      this.map = map
      map.on('click', function(e) {
        console.log(e)
      })
    },
    // 初始化对话框
    initDialog: function(dialogFormVisible, row = null) {
      this.dialogFormVisible = dialogFormVisible
    }
  }
}
</script>